<template>
  <div class="sidebar">
    <div v-for="item in fileDataList" :key="item.document_id" class="sidebar-item"
      :class="{ active: item.document_id === selectedId }" @click="handleSelect(item)">
      <span class="item-label" :title="item.document_name">{{ item.document_name }}</span>
      <el-dropdown>
        <span class="more-icon" @click.stop>
          <el-icon>
            <More />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="download" @click="handleDownload(item)">下载</el-dropdown-item>
            <el-dropdown-item command="delete" @click="handleDelete(item)">删除</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted, watch } from 'vue'
import { More } from '@element-plus/icons-vue'

const props = defineProps({
  fileDataList: {
    type: Array,
    required: true
  }
})
onMounted(() => {
})

const selectedId = ref(1)
const emit = defineEmits(['select', 'delete', 'download'])
const handleSelect = (item) => {
  selectedId.value = item.document_id
  emit('select', item)
  // 这里可以 emit 或直接调用接口
}

const handleDownload = (item) => {
  emit('download', item)
}

const handleDelete = (item) => {
  ElMessageBox.confirm(`正在删除项目：${item.document_name}，确认删除？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    emit('delete', item.document_id)
  })
}

// 默认选中第一个wiki
watch(
  () => props.fileDataList,
  (newList) => {
    if (Array.isArray(newList) && newList.length > 0) {
      selectedId.value = newList[0].document_id
    } else {
      selectedId.value = null
    }
  },
  { immediate: true }
)
</script>

<style scoped>
.sidebar {
  width: 100%;
  background: rgb(6, 21, 38);
  padding: 12px;
  box-sizing: border-box;
  color: white;
  overflow-y: auto;
}

.sidebar-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: background 0.3s;
}

.sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-item.active {
  background-color: rgba(0, 123, 255, 0.3);
}

.item-label {
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-icon {
  color: #ccc;
  cursor: pointer;
}
</style>
